import React from 'react'
import Home from './pages/Home'
import About from './pages/About'
import Test1 from './pages/Test1'
import Test2 from './pages/Test2'
// Route是真实配置前端路由的组件
// Routes只是用来包裹Route的
// Link组件在页面上最终渲染的是一个a标签,用户可以点击,点击之后就修改路径但不发送请求
import { Routes, Route, Link, NavLink } from 'react-router-dom'
export default function App() {
  return (
    <div>
      App
      <hr />
      <h1>react-router-dom</h1>
      <NavLink
        // NavLink和Link写to属性时,填入的路径,最好写完整路径
        to="/home"
        style={({ isActive }) => {
          return isActive ? { color: 'green', fontSize: 30 } : {}
        }}
        // 添加了end属性之后.当前路径所对应的路由规则的嵌套路由如果导航高亮了,则这个导航按钮不会高亮
        end
      >
        首页
      </NavLink>
      &nbsp; &nbsp;
      <NavLink
        to="/about?name=zs"
        style={({ isActive }) => {
          // 函数的返回值会赋值给style属性
          return isActive ? { color: 'green', fontSize: 30 } : {}
        }}
        state={[1, 2, 3]}
      >
        关于页
      </NavLink>
      <hr />
      <Routes>
        {/* 注意: 如果简写,就都简写.要么就都不简写 */}
        <Route path="home" element={<Home></Home>}>
          <Route path="test1" element={<Test1></Test1>}></Route>
          <Route path="test2" element={<Test2></Test2>}></Route>
        </Route>
        {/* 定义路由参数: 路由参数写在路由后面,/后面要加:. id相当于就是一个变量名 */}
        {/* 这样定义路由参数的方式,参数是必填的 */}
        {/* <Route path="about/:id" element={<About></About>}></Route> */}
        {/* 路由参数id为可选路由参数的写法: */}
        <Route path="about">
          <Route path=":id" element={<About></About>}></Route>
          <Route path="" element={<About></About>}></Route>
        </Route>
      </Routes>
      <hr />
    </div>
  )
}
